﻿@page "/table"

<PageTitle>Css Sticky Table</PageTitle>

<h4>基本表格</h4>
<div class="wrapper">
    <table class="table table-bordered mb-0" style="">
        <thead class="table-light" style="">
            <tr class="" style="">
                <th>#</th>
                <th>First</th>
                <th>Last</th>
                <th>Handle</th>
                <th>Handle</th>
                <th>Handle</th>
            </tr>
        </thead>
        <tbody>
            @foreach (int i in Enumerable.Range(1, 5))
            {
                <tr>
                    <td>@i</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@@mdo</td>
                    <td>@@mdo</td>
                    <td>@@mdo</td>
                </tr>
            }
        </tbody>
    </table>
</div>

<h4>垂直滚动</h4>
<ul class="text-danger">
    <li>
        垂直滚动时没有上、下边框。
    </li>
</ul>
<div class="wrapper limitHeight">
    <table class="table table-bordered mb-0" style="">
        <thead class="table-light" style="">
            <tr class="" style="">
                <th>#</th>
                <th>First</th>
                <th>Last</th>
                <th>Handle</th>
                <th>Handle</th>
                <th>Handle</th>
            </tr>
        </thead>
        <tbody>
            @foreach (int i in Enumerable.Range(1, 20))
            {
                <tr>
                    <td>@i</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@@mdo</td>
                    <td>@@mdo</td>
                    <td>@@mdo</td>
                </tr>
            }
        </tbody>
    </table>
</div>

<h4>水平滚动</h4>
<ul class="text-danger">
    <li>
        水平滚动时没有左、右边框。
    </li>
</ul>
<div class="wrapper">
    <table class="table table-bordered mb-0" style="width: 2000px;">
        <thead class="table-light" style="">
            <tr class="" style="">
                <th>#</th>
                <th>First</th>
                <th>Last</th>
                <th>Handle</th>
                <th>Handle</th>
                <th>Handle</th>
            </tr>
        </thead>
        <tbody>
            @foreach (int i in Enumerable.Range(1, 5))
            {
                <tr>
                    <td>@i</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@@mdo</td>
                    <td>@@mdo</td>
                    <td>@@mdo</td>
                </tr>
            }
        </tbody>
    </table>
</div>

<h4>垂直滚动 + 水平滚动</h4>
<ul class="text-danger">
    <li>
        垂直滚动时没有上、下边框。
    </li>
    <li>
        水平滚动时没有左、右边框。
    </li>
</ul>
<div class="wrapper limitHeight">
    <table class="table table-bordered mb-0" style="width: 2000px;">
        <thead class="table-light" style="">
            <tr class="" style="">
                <th>#</th>
                <th>First</th>
                <th>Last</th>
                <th>Handle</th>
                <th>Handle</th>
                <th>Handle</th>
            </tr>
        </thead>
        <tbody>
            @foreach (int i in Enumerable.Range(1, 20))
            {
                <tr>
                    <td>@i</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@@mdo</td>
                    <td>@@mdo</td>
                    <td>@@mdo</td>
                </tr>
            }
        </tbody>
    </table>
</div>
